Scratch card Module In Telegram Mini App | Scratch & Earn In Html | PHP
🚀 *Unlock Fun & Earnings with Our Scratch Card Module on Telegram Mini App!* 💰
In Below video, we dive deep into the innovative Scratch & Earn HTML module for Telegram Mini Apps. Learn how to create an engaging scratch card game that not only entertains but potentially earns you money! Whether you're a novice or an expert in PHP, our step-by-step tutorial will guide you through implementing this fun feature. Don't miss out on discovering tips and tricks for optimizing your watch time and maximizing earnings! 🎉 Subscribe for more exciting content and hit the bell icon for updates! 📲✨
How to use the Scratch & Earn module:
HTML:
Paste this inside the<body>tag of your HTML page:<div id="appCapsule">
<div class="section mt-4">
<h2>Scratch & Earn Coins</h2>
<div id="card-container">
<div class="scratch-card" id="scratchCard">
<div class="reward-layer" id="rewardLayer">
You Won: <span id="coinAmount"></span> Coins
</div>
<canvas id="scratchCanvas" width="300" height="300"></canvas>
</div>
</div>
<div id="next-msg"></div>
</div>
</div>JavaScript:
Paste this script just before the closing</body>tag:<script>
window.onload = function () {
const canvas = document.getElementById('scratchCanvas');
const ctx = canvas.getContext('2d');
const rewardLayer = document.getElementById('rewardLayer');
const coinAmountSpan = document.getElementById('coinAmount');
const nextMsg = document.getElementById('next-msg');
const width = canvas.width;
const height = canvas.height;
let isDrawing = false;
let scratched = false;
ctx.fillStyle = '#b3b3b3';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'destination-out';
// Mouse Events
canvas.addEventListener('mousedown', () => { if (!scratched) isDrawing = true; });
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseleave', () => isDrawing = false);
canvas.addEventListener('mousemove', scratch);
// Touch Events
canvas.addEventListener('touchstart', () => { if (!scratched) isDrawing = true; });
canvas.addEventListener('touchend', () => isDrawing = false);
canvas.addEventListener('touchmove', scratch);
function scratch(e) {
if (!isDrawing || scratched) return;
let rect = canvas.getBoundingClientRect();
let x, y;
if (e.touches) {
x = e.touches[0].clientX - rect.left;
y = e.touches[0].clientY - rect.top;
} else {
x = e.clientX - rect.left;
y = e.clientY - rect.top;
}
ctx.beginPath();
ctx.arc(x, y, 22, 0, Math.PI * 2);
ctx.fill();
checkScratchCompletion();
}
function checkScratchCompletion() {
const imgData = ctx.getImageData(0, 0, width, height);
let cleared = 0;
for (let i = 3; i < imgData.data.length; i += 4) {
if (imgData.data[i] === 0) cleared++;
}
const percent = (cleared / (width * height)) * 100;
if (percent > 50 && !scratched) revealReward();
}
function revealReward() {
scratched = true;
canvas.style.display = 'none';
const coins = Math.floor(Math.random() * 151) + 50;
coinAmountSpan.textContent = coins;
rewardLayer.style.display = 'flex';
showCongratsPopup(coins);
}
function showCongratsPopup(coins) {
Swal.fire({
title: "🎉 Congratulations!",
html: `
<div id="lottie" style="width:200px;height:200px;margin:auto;"></div>
<h2>You Won <b>${coins}</b> Coins!</h2>
`,
showConfirmButton: true,
confirmButtonText: "OK",
didOpen: () => {
lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'https://assets2.lottiefiles.com/packages/lf20_jbrw3hcz.json'
});
}
}).then(() => {
startCountdown();
});
}
function startCountdown() {
let sec = 5;
nextMsg.style.display = "block";
let timer = setInterval(() => {
nextMsg.innerHTML = "Next card in " + sec + " sec...";
sec--;
if (sec < 0) {
clearInterval(timer);
nextMsg.innerHTML = "";
resetCard();
}
}, 1000);
}
function resetCard() {
scratched = false;
rewardLayer.style.display = 'none';
canvas.style.display = 'block';
ctx.globalCompositeOperation = 'source-over';
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#b3b3b3';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'destination-out';
}
};
</script>Notes:
- This module uses the
canvaselement to create the scratch effect. - It randomly generates coins between 50 and 200.
- Uses SweetAlert2 (
Swal.fire) for popups and Lottie for animation — be sure to include these libraries in your project for these features to work. - After scratching more than 50% of the card, it reveals your reward and then resets after a short countdown.
- This module uses the
If you want, I can also help you with the code to include SweetAlert2 and Lottie libraries or assist in integrating this with your Telegram Mini App backend. Just let me know!
